<template>
  <div class="header">
    <!-- 左侧返回 -->
    <div class="header-button is-left" v-show="isLeft">
      <i class="fa fa-chevron-left"></i>
      <button @click="$router.go(-1)">返回</button>
    </div>
    <!-- 中间标题 -->
    <h1 class="header-title">{{title}}</h1>
  </div>
</template>
<script>
export default {
  name: "headers",
  props: {
    title: String,
    isLeft: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  }
};
</script>
<style scoped>
.header {
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgb(11, 165, 189);
  color: #fff;
}
.header-button {
  flex: 0 0 200px;
}
.header-button,
.header-title {
  float: left;
}
.header-title {
  flex: 1;
  line-height: 30px;
  /* background-color: rgb(78, 78, 184); */
}
</style>